<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型示例</title>
    <style>
        /* 容器样式 */
        .box-container {
            margin: 50px;
            padding: 20px;
            background-color: #f0f0f0;
        }

        /* 标准盒子模型（content-box） */
        .box-standard {
            box-sizing: content-box;
            /* 内容区尺寸 */
            width: 200px;
            height: 150px;
            background-color: #4a90e2;
            color: white;
            text-align: center;
            line-height: 150px;
            /* 内边距 */
            padding: 30px;
            /* 边框 */
            border: 5px solid #333;
            /* 外边距 */
            margin: 20px;
        }

        /* IE盒子模型（border-box） */
        .box-ie {
            box-sizing: border-box;
            /* 包含content+padding+border的总尺寸 */
            width: 310px;
            height: 220px;
            background-color: #ff6b6b;
            color: white;
            text-align: center;
            line-height: 150px;
            /* 内边距 */
            padding: 30px;
            /* 边框 */
            border: 5px solid #333;
            /* 外边距 */
            margin: 20px;
        }

        /* 说明文本容器 */
        .box-explanation {
            margin-top: 30px;
            padding: 15px;
            background-color: #e8f4f8;
            border-left: 4px solid #2c3e50;
        }

        /* 高亮文本样式 */
        .highlight {
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="box-container">
        <!-- 标准盒子模型示例 -->
        <div class="box-standard">标准盒子模型-内容区</div>
        
        <!-- IE盒子模型示例 -->
        <div class="box-ie">IE盒子模型-含内容、内边距、边框</div>
        
        <!-- 说明文字区域 -->
        <div class="box-explanation">
            <p>CSS盒子模型组成部分：</p>
            <ul>
                <li><span class="highlight">内容区（Content）</span>：元素内部显示内容的区域，如上述蓝色和红色部分的核心区域。</li>
                <li><span class="highlight">内边距（Padding）</span>：内容区与边框之间的空间，会影响元素内部内容与边框的距离。</li>
                <li><span class="highlight">边框（Border）</span>：围绕内边距的线条，可设置样式、宽度和颜色。</li>
                <li><span class="highlight">外边距（Margin）</span>：边框与其他元素之间的空间，用于控制元素间的间距。</li>
            </ul>
            
            <p><strong>标准盒子模型（content-box）</strong>：宽度和高度仅为内容区尺寸，元素总宽度 = 内容宽度 + padding左右 + border左右 + margin左右，如第一个盒子总宽度计算：200px + 30px×2 + 5px×2 + 20px×2 = 310px。</p>
            
            <p><strong>IE盒子模型（border-box）</strong>：宽度和高度包含内容区、内边距和边框，元素总宽度 = 设定宽度 + margin左右，如第二个盒子设定宽度310px，加上外边距20px×2，总宽度为350px，而内容区宽度会自动调整为310px - 30px×2 - 5px×2 = 230px。</p>
        </div>
    </div>
</body>
</html>